<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
      <table-index :table="table" @loadData="loadData">
        <template #supplierTypeName="{ record }">
          <div class="col-text">{{ record.supplierTypeName }} </div>
        </template>
        <template #contactsName="{ record }">
          <span v-if="record.contactsName || record.contactsMobile">
            <div class="col-text">{{ record.contactsName || '-' }} </div>
            <div class="col-text">{{ record.contactsMobile || '-' }}</div>
          </span>
          <span v-else>-</span>
        </template>
        <template #statusName="{ record }">
          <div class="flex items-center status-wrapper">
            <span :class="[+record.status !== 1 ? 'close' : 'open', 'status-icon']"></span>
            <span>{{ record.statusName }}</span>
          </div>
        </template>
        <a-popconfirm v-model:popup-visible="delPopVisible" content="是否确认删除?" type="error" />
      </table-index>
      <!-- 导入 -->
      <import-modal ref="imoportRef" action="/supplier/importExcel" download-import="/供应商导入模板.xlsx" @ok="loadData" />
    </a-card>
  </div>
</template>

<script setup name="SupplierList">
  import { useExport } from '@/hooks/list'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getSupplierList, supplierExportExcel, supplierChangeStatus } from '@/api/market/supplier'
  import { onMounted, reactive, computed, ref } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { Modal, Message } from '@arco-design/web-vue'
  import { listColumns } from './options'

  const { navigateTo } = useNavigate()
  const supplierPageData = usePageDict('supplierPageData')
  // 接口参数（不包含page信息）
  const queryParam = reactive({})
  const imoportRef = ref(null) // 导入组件

  // 导出事件
  const handleExport = () => {
    useExport(supplierExportExcel, queryParam)
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      {
        label: '供应商名称',
        prop: 'supplierName',
        type: 'a-input',
        change: (value) => {
          if (!value) {
            queryParam.supplierName = undefined
          }
        },
      },
      {
        label: '供应商类型',
        prop: 'supplierTypes',
        type: 'a-select',
        multiple: true,
        options: supplierPageData.supplierTypeList,
      },
      {
        label: '供应商联系人',
        prop: 'contactsName',
        type: 'a-input',
        change: (value) => {
          if (!value) {
            queryParam.contactsName = undefined
          }
        },
      },
      {
        label: '状态',
        prop: 'status',
        type: 'a-select',
        options: supplierPageData.enableList,
      },
    ]
  })

  // 初始化
  const init = () => {
    loadData()
  }
  // table 配置
  const table = useTable({
    queryParam,
    columns: listColumns,
    operates: [
      {
        label: '启用',
        permission: 'svms:market:bazaar:supplier.enable',
        // 禁用状态显示启用按钮
        show: (record) => record.status == 0,
        method: (record) => {
          updateStatus(record, '启用')
        },
      },
      {
        label: '停用',
        permission: 'svms:market:bazaar:supplier.deactivate',
        // 禁用状态显示启用按钮
        show: (record) => record.status == 1,
        method: (record) => {
          updateStatus(record, '停用')
        },
      },
      {
        label: '编辑',
        permission: 'svms:market:bazaar:supplier.edit',
        method: (record) => {
          navigateTo('/supplier-manage/edit/' + record.id, `${record.supplierName}-编辑`)
        },
      },
      {
        label: '详情',
        permission: 'svms:market:bazaar:supplier.detail',
        method: (record) => {
          navigateTo('/supplier-manage/detail/' + record.id, `${record.supplierName}-详情`)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:market:bazaar:supplier.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:market:bazaar:supplier.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        icon: 'plus',
        permission: 'svms:market:bazaar:supplier.add',
        label: '新增',
        method: () => handleAdd(),
      },
    ],
  })

  // 修改状态
  const updateStatus = (record, operateName) => {
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      content: `是否确认${operateName}？`,
      onOk: () => {
        const param = {
          id: record.id,
          status: operateName == '启用' ? 1 : 0,
        }
        supplierChangeStatus(param).then(() => {
          Message.success(`${operateName}成功`)
          loadData()
        })
      },
    })
  }

  // 列表接口调用
  const imgportLoadData = (page) => {
    // 重置后，也重置统计样式
    // const hasValues = Object.values(queryParam).every((value) => value !== undefined)
    // if (!hasValues) {
    //   resetSn()
    // }
    // const fn = useFetchTableDataApi(table, queryParam, getCarList)
    // fn(page).then(() => {
    //   statisticsGets.value.getStatistic(queryParam)
    // })
  }

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getSupplierList)
  // 添加事件
  const handleAdd = () => {
    navigateTo('/supplier-manage/create')
  }
  // 删除气泡
  // mounted 调用接口
  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .status-wrapper {
    height: 28px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      &.open {
        background: #00b42a;
      }
      &.close {
        background: #ea0000;
      }
    }
  }
</style>
